<template>


  <el-form :model="form" label-width="auto">
    <el-form-item label="菜单名称">
      <el-input v-model="form.menuName"/>
    </el-form-item>
    <el-form-item label="url">
      <el-input v-model="form.url"/>
    </el-form-item>
    <el-form-item label="path">
      <el-input v-model="form.path"/>
    </el-form-item>
    <el-form-item label="level">
      <el-input v-model="form.level"/>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </el-form-item>
  </el-form>

</template>

<script setup name='edit'>
import {onMounted, ref} from "vue";
import {ElNotification} from 'element-plus'

//用于保存的API
import {getById, saveOrUpdate,} from '@/api/permission/menu/index'


//列表页传递的属性 
//closeDialog 用于关闭dialog 
// editId 编辑的id
const {closeDialog, editId} = defineProps(['closeDialog', 'editId'])


//表单数据
const form = ref({
  menuName: ''
})

//保存按钮 点击事件
const onSubmit = () => {
  saveOrUpdate(form.value).then(success => {
    ElNotification({
      title: '消息',
      type: 'success',
      message: "保存成功",
    })

    //调用父组件中的 函数用于关闭 dialog 和更新查询结果
    closeDialog(true)
  })
}

const cancle = () => {
  //调用父组件中的 函数用于关闭 dialog 和更新查询结果
  closeDialog(false)
}


// 当修改操作的到时候 根据主键查询
function pageGetById() {

  getById(editId).then(user => {
    form.value = user
  })

}


onMounted(() => {

  //如果修改
  if (editId) {
    pageGetById()
  }


})


</script>

<style scoped></style>